<template>
  <div class="goods-list">
    <div class="goods-item" v-for="item in goodslist" :key="item.id">
      <router-link :to="{ name: 'goodsInfo', params: { gInfo: item } }">
        <img :src="item.img" />
        <h1 class="title">{{ item.name }}</h1>
        <p class="info">
          <span class="price">￥{{ item.price }}</span>
          <span class="sell">剩余{{ item.num }}</span>
        </p>
      </router-link>
    </div>
    <mt-button
      class="more"
      v-if="goodslist.length >= last_id"
      size="large"
      @click="getMore"
      >加载更多</mt-button
    >
    <div class="more" style="text-align: center; width: 100%" v-else>
      已经到底了...
    </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            testlist:[
                {id:1,name:'电水壶',price:98,num:100,img:require("../assets/good/11.jpg")},
                {id:2,name:'手表',price:98,num:100,img:require("../assets/good/12.jpg")},
                {id:3,name:'书包',price:98,num:100,img:require("../assets/good/13.jpg")},
                {id:4,name:'手机',price:98,num:100,img:require("../assets/good/14.jpg")},
                {id:5,name:'煎锅',price:98,num:100,img:require("../assets/good/15.jpg")},
                {id:6,name:'电脑',price:98,num:100,img:require("../assets/good/16.jpg")},
                {id:7,name:'衣服',price:98,num:100,img:require("../assets/good/17.jpg")},
                {id:8,name:'女包',price:98,num:100,img:require("../assets/good/18.jpg")},
                {id:9,name:'电磁炉',price:98,num:100,img:require("../assets/good/19.jpg")}, 
                {id:10,name:'手表',price:98,num:100,img:require("../assets/good/20.jpg")}        
            ],
            goodslist:[],
            last_id:0
        }
    },
    created() {
        this.getGoodsList()
    },
    methods: {
        getGoodsList(){
            for (var i = this.last_id; i < this.testlist.length; i++){
                this.goodslist=this.goodslist.concat(this.testlist[i])
                if(i==3+this.last_id)
                break
     }
     this.last_id=i+1
     console.log(this.last_id);
        },
        getMore(){
            this.getGoodsList()
        }

    }
}
</script>
<style lang="scss" scope>
    .goods-list{
        display: flex;
        flex-wrap: wrap;
        padding-left: 10px;
    }
    .goods-item{
        width: calc(calc(100%)/2-10px);
        margin: 10px 10px 0 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 10px;
        padding: 10px;
        img{
            width: 100%;
        }
        .title{
            font-size: 14px;
            color: #333;
            margin: 10px 0;
        }
        .info{
            display: flex;
            justify-content: space-between;
            margin-bottom: 0;
        }
        .price{
            color: red;
            font-weight: bold;
            font-size: 16px;
        }
        .sell{
            font-size: 13px;
        }
    }
    .more{
        margin: 15px 0;
        font-size: 14px;
    }
</style>